<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>JS+CSS实现日月交替效果</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="btn-box">
    <div class="sunBtn">
      <span class="iconfont icon-taiyang"></span> 白天模式
    </div>
    <div class="moonBtn">
      <span class="iconfont icon-moon"></span> 黑夜模式
    </div>
  </div>

<div class="dark" id="container">
  <div class="bg"></div>
  <div class="moon-box">
    <div class="moon"></div>
  </div>
  <div class="sun-box">
    <div class="sun"></div>
  </div>
  <div class="sea"></div>
</div>

  <script>
    const sunBtn = document.querySelector('.sunBtn')
    const moonBtn = document.querySelector('.moonBtn')

    sunBtn.addEventListener('click',function () {
      document.getElementById('container').setAttribute('class', 'light');
    })

    moonBtn.addEventListener('click',function () {
      document.getElementById('container').setAttribute('class', 'dark');
    })
  </script>
</body>

</html>